<template>
  <basic-container class="menu-container">
    <!-- <headers /> -->
    <div class="menu-header">
      <ArrowLeftBold
        @click="handleBack"
        width="24"
        height="24"
        style="padding-top: 4px; cursor: pointer"
        title="返回"
      />
      <p class="menu-title">{{ trialForm.name }}</p>
    </div>
    <div class="menu-tabs">
      <el-tabs v-model="selectTab" class="demo-tabs" @tab-click="handleTabChange">
        <el-tab-pane
          :label="item.label"
          :name="item.prop"
          v-for="item in tabOption.column"
          :key="item.prop"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="menu-content">
      <addEdit v-if="selectTab === 1" />
      <group v-if="selectTab === 2" />
      <deptAllot v-if="selectTab === 3" />
      <bringInto v-if="selectTab === 4" />
      <groupmanage v-if="selectTab === 5" />
      <dataExport v-if="selectTab === 6" @dataExportChange="dataExportChange" />
      <trialFile v-if="selectTab === 7" />
      <!-- 公开信息---已舍弃 -->
      <openMessage v-if="selectTab === 8" />
      <!-- 标本管理 -->
      <specimen v-if="selectTab === 9" style="width: 95%;" :routerQuery="routerQuery"/>
      <dataStatistics v-if="selectTab === 10" style="width: 95%;" />
    </div>
  </basic-container>
</template>
<script setup>
import addEdit from './addEdit.vue';
import group from './group.vue';
import deptAllot from './deptAllot.vue';
import bringInto from './bringInto.vue';
import groupmanage from './groupManage/groupmanage.vue';
import basicMessage from './groupMneu/basicMessage.vue';
import groupFlow from './groupMneu/groupFlow.vue';
import dataExport from './dataExport.vue';
import trialFile from './trialFile.vue';
import openMessage from './openMessage.vue';
import dataStatistics from './dataStatisticsMenu/dataStatistics.vue';
import specimen from '../../specimen/specimen.vue';
import { getDetail } from '@/api/trial/trial';
import { useStore } from 'vuex';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const selectTab = ref(1);
const routerQuery = ref({});
routerQuery.value = route.query;
const trialForm = ref({});
const handleTabChange = tab => {
  localStorage.removeItem('sendIsIndicator')
  selectTab.value = tab.props.name;
};
const initTrialDetail = async id => {
  let res = await getDetail(id);
  trialForm.value = res.data.data;
};
// 返回
const handleBack = () => {
  localStorage.removeItem('storageTrialStatus')
  store.commit('SET_TRIAL_STATUS', null);
  router.push({
    path: '/trial/trial',
    query: {},
  });
};
onMounted(() => {
  selectTab.value = Number(route.query.selectTab);
  if(routerQuery.value.trialId){
    initTrialDetail(routerQuery.value.trialId);
  }
});
const dataExportChange = () => {
  selectTab.value = 5;
};
const tabOption = reactive({
  column: [
    {
      label: '基本信息',
      prop: 1,
    },
    {
      label: '分组设置',
      prop: 2,
    },
    {
      label: '机构分配',
      prop: 3,
    },
    /*{
      label: '纳入排除',
      prop: 4,
    },*/
    {
      label: '入组管理',
      prop: 5,
    },
    {
      label: '数据导出',
      prop: 6,
    },
    {
      label: '相关资料',
      prop: 7,
    },
    // {
    //   label: '公开信息',
    //   prop: 8,
    // },
   /* {
      label: '标本管理',
      prop: 9,
    },*/
    {
      label: '数据统计',
      prop: 10,
    },
  ],
});
</script>
<style scoped lang="scss">
.menu-container {
  ::v-deep .basic-container__card {
    height: 100%;
  }
  ::v-deep .el-card__body {
    height: 100%;
  }
  height: 100%;
  overflow-y: hidden;
}
.menu-header {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.menu-title {
  font-size: 28px;
  margin-top: 0;
  // margin-left: 10px;
  margin-bottom: 0;
}
.menu-content {
  width: 100%;
  height: calc(100% - 120px);
  display: flex;
  justify-content: center;
  overflow-y: auto;
}
</style>
